<template>
  <div>
    <el-button type="primary" class="mb-4" @click="addLanguage">新增</el-button>
    <el-table :data="tableData" height="82vh">
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="name" label="服务商" />
      <el-table-column prop="url" label="服务商地址">
        <template #default="scope">
          <el-link :href="scope.row.url" target="_blank" type="primary">{{ scope.row.url
          }}</el-link>
        </template>
      </el-table-column>


      <el-table-column prop="newTime" label="更新时间" align="center" />
      <el-table-column prop="remark" label="备注">
        <template #default="scope">
          <el-tooltip effect="dark" placement="top-start">
            <template #content>
              <div style="max-width: 500px;">
                {{ scope.row.remark }}
              </div>
            </template>
            <el-text line-clamp="2">
              {{ scope.row.remark }}
            </el-text>
          </el-tooltip>
        </template>
      </el-table-column>



      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <!-- <el-button @click="handleDelete(scope.row)" link type="danger"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination :total="total" :limit="searchFrom.pageSize" :page="searchFrom.pageNum" @pagination="handlePageChange">
    </Pagination>

    <el-dialog v-model="dialogVisible" :title="title" :before-close="handleClose" width="550">
      <el-form :model="languageParams" ref="providerForm" label-position="left" label-width="auto"
        :rules="languageRules">
        <el-form-item label="服务商" prop="name" required>
          <el-input maxlength="100" show-word-limit v-model.trim="languageParams.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="URL" prop="url" required>
          <el-input v-model.trim="languageParams.url" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="备注内容" prop="auditRemark">
          <el-input v-model.trim="languageParams.remark" type="textarea" :rows="11" maxlength="300" show-word-limit
            placeholder="请输入内容"  
            resize="none"/>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSure(providerForm)">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const publicItem = ref({});
const dialogVisible = ref(false); //默认不显示弹出框
const tableData = ref([]);
const title = ref("新增");
const isAdd = ref(true); //默认是新增
const total = ref(0);
const switchStatus = ref(false);
const searchFrom = ref({
  pageNum: 1,
  pageSize: 20,
});

const providerForm = ref();
const languageParams = ref({
  name: "", //名称
  remark: "", //备注
  url: ''//服务商Url
});


onMounted(() => {
  getList();
});
// 获取列表
const getList = () => {
  site.general
    .siteserverproviderList({
      data: searchFrom.value,
    })
    .then((res) => {
      if (res.data?.length) {
        res.data = res.data.map((code) => {
          return {
            ...code,
            newTime:  proxy.DateTime(code.lastModified) ,
          };
        });
      }
      tableData.value = res.data;
      total.value = res.total;
    });
};
// 编辑
const handleEdit = (rowItem) => {
  publicItem.value = rowItem;
  dialogVisible.value = true;
  isAdd.value = false;
  title.value = "编辑";

  languageParams.value.name = rowItem.name;
  languageParams.value.remark = rowItem.remark;
  languageParams.value.url = rowItem.url;

};
const addLanguage = () => {
  dialogVisible.value = true;
  title.value = "新增";
  isAdd.value = true;
};
// 取消
const handleClose = () => {
  proxy.resetForm("providerForm");

  isAdd.value = false;
  dialogVisible.value = false;
  languageParams.value.name = "";
  languageParams.value.remark = "";
  languageParams.value.url = "";

};
// 确定
const handleSure = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      if (isAdd.value) {
        site.general
          .siteserverproviderAdd({
            data: languageParams.value,
          })
          .then((res) => {
            if (res.code === 200) {
              handleClose();
              getList();
              proxy.$modal.msgSuccess("新增成功");
            }
          });
      } else {
        site.general
          .siteserverproviderUpdatebyid({
            pathParams: {
              id: publicItem.value.id,
            },
            data: languageParams.value,
          })
          .then((res) => {
            if (res.code === 200) {
              handleClose();
              getList();
              proxy.$modal.msgSuccess("修改成功");
            }
          });
      }
    }
  });
};
// 删除
const handleDelete = (rowItem) => {
  var newArray = [];
  newArray.push(rowItem.id);
  proxy.$modal.confirm("是否确认删除此数据类型？").then(() => {
    site.general
      .siteserverproviderRemovebatchbyids({
        data: {
          ids: newArray,
        },
      })
      .then((res) => {
        if (res.code === 200) {
          getList();
          proxy.$modal.msgSuccess("删除成功");
        }
      });
  });
};
// 分页
const handlePageChange = (newPage) => {
  searchFrom.value.pageNum = newPage.page;
  searchFrom.value.pageSize = newPage.limit;
  getList();
};
const languageRules = reactive({
  name: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  url: [{
    required: true,
    message: "请输入",
    trigger: "blur",
  }, {
    pattern:
      /^(http|https):\/\/([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(:\d+)?(\/.*)?$/,
    message: "请输入正确的URL",
    trigger: "blur",
  }
  ],
});
</script>